<template>
	<view class="goodlist" v-if="dataBuffer">
		<!-- head区域 -->
		<view class="head">
			<view class="search">
				<u-search 
					:disabled="true"
					@click="goSearch"
					shape="square"
					:show-action="true" 
					action-text="搜索" 
					:animation="true" 
					margin="10rpx 0rpx">
				</u-search>
			</view>
			<view class="sortbox">
				<view  class="sort">
					<view hover-class="touchOpacity">综合排序</view>
					<view hover-class="touchOpacity">销量</view>
					<view hover-class="touchOpacity" @click="pricesort">
						<text>价格</text>
						<image src="./img/sort.png"></image>
					</view>
					<view hover-class="touchOpacity">好评度</view>
					<view hover-class="touchOpacity">店铺</view>
				</view>	
				<view class="filter" hover-class="touchOpacity">
					<image src="./img/filter.png"></image>
					<text>筛选</text>
				</view>
			</view>
			
		</view>

		<!-- 提示标语区域 -->
		<view class="biaoyu" hover-class="touchOpacity">
			<u-notice-bar mode="vertical" :list="list"  :show="show" :close-icon="true" @close="close" ></u-notice-bar>
		</view>
		
		<!-- 商品列表区域 -->
		<view class="list" >
			
			<view 
				class="row" 
				v-for="(item,index) in goodlist" :key="index" 
				scroll-top='100'
				@click="goDetail(item.id)"
			>
				<!-- 执行图片赖加载 此处注意百度小程序问题需要指定固定高度-->
				<view class="image">
					<u-lazy-load :key="index" :image="baseUrl + item.img" height="218"></u-lazy-load>
				</view>
				<view class="info" hover-class="touchOpacity">
					<text>{{item.goodsname}}</text>	
					<view class="money">
						<text>￥ {{item.price}}</text> <text>￥{{item.market_price}}</text>
					</view>
					<text>双11.11限制200起</text>
					<text space="ensp">3565评论   99%好评</text>	
				</view>
			</view>
		</view>
		
		<!-- 底部悬浮球 -->
		<view 
			v-if="topBuffer"
			class="quick_top" 
			hover-class="touchOpacity"
			@click="toTop"
		>
			<image src="./img/totop.png"></image>
		</view>
		<!-- 组件  加载状态 -->
		<u-loadmore :status="loadStatus" />
	</view>
	<view v-else>
		<!-- 无数据提示 -->
		<u-empty 
			text="暂无数据~~去逛逛~~" mode="list" 
			:show="!dataBuffer" 
			color="orange" icon-color="orange"
		></u-empty>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				value2:'',
				list: [
					'筛选11.11大促商品,亲,请速速赶来',
					'筛选11.11大促商品,亲,请速速赶来',
				],
				show: true,
				mode: 'right',
				mask: true, // 是否显示遮罩
				closeable: true,
				closeIconPos: 'top-right',
				topBuffer:true,//控制悬浮球显示
				dataBuffer:true,
				goodlist:[],
				baseUrl:this.$baseUrl,
				cid:'',
				type:'',
				page:1,
				pageNum:1,
				totalPage:1,
				loadStatus:'loadmore'
			}
		},
		onLoad(option){
			console.log(option.cid);
			this.cid = Number(option.cid)
			this.type = Number(option.type)
			this.getGoodList()
		},
		onShow() {
			uni.setNavigationBarTitle({
				title:'商品列表'
			})
		},
		// onReachBottom() {
		// 	// console.log('上拉触底');
		// 	// console.log(this.page,this.totalPage);
		// 	this.page++;
		// 	if(this.page <= this.totalPage){
		// 		this.getGoodList();
		// 	}
		// },
		methods: {
			// 跳转到搜索页面
			goSearch(){
				
			},
			goDetail(id){
				uni.navigateTo({
					url:'../gooddesc/gooddesc?id=' + id 
				})
			},
			// 价格筛选事件
			pricesort(){
				uni.showActionSheet({
					itemList:['升序','降序']
				})
			},
			// 关闭消息滚动条
			close(){
				this.show = false
			},
			toTop(){
				
			},
			// 获取二级分类商品
			async getGoodList(){
				this.loadStatus = 'loading'
				let res = await this.$http({
					url:'getgoodlist',
					data:{
						cateid:this.cid,
						page:this.pageNum,
						size:10,
						type:this.type
					}
				})
				
				
				
				console.log(res);
				if(res.data.code === 200){
					if(res.data.list.totalPage == 0){
						this.dataBuffer = false
					}else{
						this.dataBuffer ? "":this.dataBuffer = true;
						if(this.page >= res.data.list.totalPage){
							// console.log('没有数据了');
							this.loadStatus = 'nomore'
						}else{
							this.loadStatus = 'loadmore'
						}
						console.log('哈哈');
						this.goodlist = this.goodlist.concat(res.data.list.goodData);
						this.totalPage = res.data.list.totalPage
						console.log(this.goodlist);
						
					}
				}else{
					
				}
				
				
				
			}
		}
		
		
	}
</script>

<style>
	/* 引入样式 */
	@import url("./goodlist.css");
</style>
